<template>
  <div>
      <div class="login-head">
          <span @click="goback()"><van-icon name="cross" size="0.2rem" /></span>
          <a href="#">帮助</a>
      </div>
      <div class="login-con">
          <h1>欢迎注册美团</h1>
          <div class="login-btn">
              <input type="text" placeholder="请输入手机号" v-model="phone">
              <input :type="lala" placeholder="请输入密码" v-model="pass">
               <input :type="lala" placeholder="请确认密码" v-model="pass1">
              <span class="yzm"> <input  type="text" placeholder="请输入验证码" v-model="code"><button :disabled="bool" @click="getcode()" :style='{"background-color":bool?"#FFF2CD":"#F9BB0C"}'>{{yzm}}</button></span>
              <span class="yj" v-if="lala =='password'" @click="change()"><van-icon name="closed-eye" size="0.2rem" /></span>
              <span class="yj" v-else @click="change()"><van-icon name="browsing-history-o" size="0.2rem" />
              </span>
          </div>
          <div class="check">
              <span><van-checkbox v-model="checked"></van-checkbox></span>
              <span>勾选即代表您已经同意
<a href="#">《美团用户服务协议》</a>
<a href="#">《隐私政策》</a></span>
          </div>
          <div class="button">
              <button :disabled="!checked" :style='{"background-color":checked?"#F9BB0C":"#FFF2CD"}'>注册</button>
          </div>
         
      </div>
      <div class="login-bot">
        <span><van-icon name="wechat"  color="green" size="0.2rem"/></span>  
         <span> <van-icon name="alipay" color="blue" size="0.2rem"/></span>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            pass:"",
            pass1:"",
            phone:"",
            code:"",
            lala:"password",
            checked:false,
            yzm:"获取验证码",
            bool:false,
            timer:"",
            num:60
        }
       
    },
    methods:{
        change(){
            
            if(this.lala == "password"){
                this.lala = "text";
               
            }else{
                this.lala = "password";
            }
          
        },
         goback(){
         this.$router.go(-1);   
        },
        fun(){
           
            this.yzm = this.num+"秒后重发";
             if(this.num==0){
                clearInterval(this.timer);
                this.bool = false;
                this.num =60;
                this.yzm="获取验证码"
            }
            --this.num;
            
        },
        getcode(){
            this.bool=true;
    
            this.timer=setInterval(this.fun,1000);

        }
    }
}
</script>

<style scoped>
.login-head{
    width: 3.5rem;
    height: 0.5rem;
    margin: 0.2rem auto;
    display: flex;
    justify-content: space-between;
}
.login-con{
    width: 3.5rem;
    height:4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: auto;

}


h1{
    margin:0 0 0.3rem 0;
}
.login-btn{
    display: flex;
    flex-direction: column;
    position: relative;
}
.login-btn>input{
    display: block;
    width: 3rem;
    height: 0.5rem;
    border: 0;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    padding: 0.2rem 0.1rem;
}
.yj{
    position: absolute;
    top: 33%;
    right: 0;
}
.check{
    width: 3rem;
    height: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0.2rem auto 0 auto;
}
.check>span>a{
    color: #F9BB0C;
}
.check>span:nth-of-type(1){
    width: 20%;
    height: 100%;
}
.button{
    width: 3rem;
    height:0.5rem;
    margin: 0.2rem auto 0 auto;
    box-sizing: border-box;
}
.button>button{
    width: 100%;
    height: 100%;
    font-size: 0.2rem;
    box-sizing: border-box;
    border: 0;
    font-weight: 600;
}

.login-bot{
    width: 3rem;
    margin: auto;
    display: flex;
    justify-content:center;
}
.login-bot>span{
    width: 0.3rem;
    height: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: 50%;
    margin: 0 0.3rem;
}
/* 验证码 */
.yzm{
    width: 100%;
    border: 1px solid black;
    height: 0.3rem;
    margin-top: 0.1rem;
}
.yzm>input{
    border: 0;
    width: 50%;
    border-right: 1px solid black;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.1rem;
}
.yzm>button{
    width: 50%;
    height: 100%;
    border: 0;
    box-sizing: border-box;
    padding: 0 0.1rem;
}
</style>